<template>
	<view>
		<u-swiper :list="dataObj?.goodsImages" img-mode="center" height="400" name="url"></u-swiper>

		<view class="bg-white u-p-32 u-p-t-38 u-p-b-38">
			<view class="u-font-xl fw-middel">{{dataObj.name}}</view>
			<view class="u-m-t-28">
				<view class="u-flex u-row-between">
					<view>
						<text class="u-font-xs color-red">￥</text>
						<text class="u-font-xl fw-middel color-red u-m-r-14">{{dataObj.price}}</text>
						<text class="u-font-xs color-gary-xs line-del">￥{{dataObj.salePrice}}</text>
						<text class="u-font-xs color-gary-xs u-m-l-6">￥打包费 ￥{{dataObj.packageFee}}</text>

					</view>
					<view class="u-font-lg fw-middel color-gary-xs" v-if="dataObj.stock==0 ||dataObj.saleState!=2">已售罄
					</view>
					<!-- <u-number-box v-else @change="orderPinia.setShop(dataObj)" v-model="dataObj.nums"></u-number-box> -->
					<view class="u-flex">
						<u-button :disabled="dataObj.nums==0" @click="inputChange('-')" size="mini">-</u-button>
						<input type="text" :value="dataObj.nums" disabled class="inputStyle">
						<u-button @click="inputChange('+')" size="mini">+</u-button>
					</view>
				</view>
			</view>
		</view>

		<view class="u-m-t-16 u-p-32 u-p-t-38 u-p-b-38 bg-white u-font-lg ">
			<view class="u-flex">
				<view class="color-gary-xs label">商家名称:</view>
				<view class="u-flex-1">{{dataObj.businessName}}</view>
			</view>
			<view class="u-flex u-m-t-15">
				<view class="color-gary-xs label">商品分类:</view>
				<view class="u-flex-1">{{dataObj.thirdClassifyName}}</view>
			</view>
			<view class="u-flex u-m-t-15">
				<view class="color-gary-xs label">简介:</view>
				<view class="u-flex-1">{{dataObj.introduce}}</view>
			</view>
			<view class="u-flex u-m-t-15">
				<view class="color-gary-xs label">商家咨询:</view>
				<view class="u-flex-1 color-yellow "><u-icon @click="callPhone" label="拨打电话" label-color="#ffc300"
						label-pos="left" name="phone-fill"></u-icon></view>
			</view>
		</view>

		<view class="tipsTitle">详情</view>


		<view class="bg-white u-p-32 main ">
			<u-parse :content="dataObj.describes"></u-parse>
			<u-empty v-if="dataObj.describes==''" text="暂无内容"></u-empty>
			<view class="defaul"></view>
		</view>

		<shop-cart v-model="show"></shop-cart>

	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import goodsApi from '@/api/goods';
	import { onLoad } from '@dcloudio/uni-app';
	import shopCart from '@/components/shopCart/shopCart.vue'
	import orderSotre from '@/store/order'
	import uParse from '@/plugins/u-parse/u-parse.vue'


	const orderPinia = orderSotre()

	const params = reactive({
		id: ''
	})

	const dataObj = reactive({

	})

	const show = ref(false)


	const callPhone = () => {
		uni.makePhoneCall({
			phoneNumber: dataObj.businessPhone
		})
	}

	function inputChange(type) {
		switch (type) {
			case '-':
				dataObj.nums--
				break;
			case '+':
				dataObj.nums++
				break;
		}
		orderPinia.setShop(dataObj)
	}

	onLoad((e) => {
		params.id = e.id
		goodsApi.goods(params).then(res => {
			res.data.nums = 0
			Object.assign(dataObj, res.data)
		})

	})
</script>

<style lang="scss" scoped>
	@import url("@/plugins/u-parse/u-parse.css");

	.label {
		width: 170upx;
		font-weight: 600;
	}

	.tipsTitle {
		font-size: 32upx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 28upx 0;
	}

	.tipsTitle::after {
		content: '';
		width: 200upx;
		height: 1upx;
		background-color: #d4d4d4;
		margin: 0 15upx;
	}

	.tipsTitle::before {
		content: '';
		width: 200upx;
		height: 1upx;
		background-color: #d4d4d4;
		margin: 0 15upx;
	}

	.main {}

	.defaul {
		height: 270upx;
	}

	.inputStyle {
		width: 60upx;
		text-align: center;
	}
</style>